<template>
    <!-- tabs -->
    <el-tabs v-model="activeTargetType" size="small">
        <el-tab-pane label="全年业绩" name="1"></el-tab-pane>
        <el-tab-pane label="本月业绩" name="2"></el-tab-pane>
        <el-tab-pane label="回款" name="3"></el-tab-pane>
        <el-tab-pane label="全年上刊" name="4"></el-tab-pane>
        <el-tab-pane label="本月上刊" name="5"></el-tab-pane>
        
        <target-page :target-type="activeTargetType"></target-page>
    </el-tabs>
    
    <!-- 名词注解 -->
    <div id="tipsDiv" class="tips-div" @click="tipsDialog.show = true">
        <span>指标名词注解</span>
        <img class="tips-icon" src="@/assets/icon_question@2x.png" />
    </div>
    
    <!-- 名词注解弹窗 -->
    <el-dialog
        v-model="tipsDialog.show"
        title="指标名词注解"
        width="60%"
    >
        <xc-table
            id="xc-table"
            :data="tipsDialog.list"
            :columns="tipsDialog.columns"
        >
            <template #index="{ row }" width="100px">{{row.index}}</template>
        </xc-table>
    </el-dialog>
</template>

<script lang="ts" setup>
    import { reactive, ref, onMounted, nextTick } from 'vue';
    import { TipsDialog } from './ModelDefines';
    import TargetPage from './TargetPage.vue';
    import XcTable from '@x-tech/fe-pc-components/src/components/XcTableTemplate/index.vue';

    //当前激活的tab
    const activeTargetType = ref<string>('1')
    
    //名词解释弹窗model
    const tipsDialog = reactive(new TipsDialog());

    onMounted(async () => {
        await nextTick();
        //需要移动tipsDiv的位置，不然无法触发事件
        let tipsDiv = document.getElementById('tipsDiv');
        let tabsNav = document.getElementsByClassName('el-tabs__nav-scroll');
        if (tipsDiv && tabsNav.length > 0) {
            let tabs = tabsNav[0];
            tabs.insertBefore(tipsDiv, tabs.childNodes[0]);
        }
    });
    
</script>

<style lang="scss">
    .el-dialog {
        .el-dialog__header {
            padding-left: 24px;
            padding-right: 24px;
        }
        .el-dialog__title {
            font-weight: 500;
        }
        .el-dialog__headerbtn {
            font-size: 20px;
            color: #808080;
        }
        .el-dialog__body {
            padding: 10px 24px 30px 24px
        }
    }
    .tips-div {
        float: right;
        font-size: 14px;
        color: #999999;
        line-height: 20px;
        cursor: pointer;
        padding-bottom: 10px;
        display: flex;
        align-items: center;
        .tips-icon {
            width: 14px;
            height: 14px;
            margin-left: 8px;
        }
    }
</style>

